<template>
	<div v-if="data.length > 0">
		<el-button
			type="primary"
			class="mb20"
			v-auth="'product:transport-fee:template:create:invoke'"
			@click="$router.push({ path: `/goods/freight/add` })"
			>新增运费模板</el-button
		>
		<div class="freight-box mb20" v-for="item in data" :key="item.id">
			<ProTable :pagination="false" title="运费模板" :columns="columns" :data="item.details">
				<template #tableHeader>
					<div class="freight-title flex-between mt20">
						<span class="font18">{{ item.name }}</span>
						<div class="flex-center">
							<div class="text-regular mr10">更新时间：{{ item.updateTime }}</div>
							<el-button class="mb0" type="primary" link v-auth="'product:transport-fee:template:edit:invoke'" @click="onUpdate(item)">
								编辑
							</el-button>
							<el-divider direction="vertical" v-auth="'product:transport-fee:template:edit:invoke'" />
							<el-button class="mb0" type="primary" link v-auth="'product:transport-fee:template:delete:invoke'" @click="onDelete(item)">
								删除
							</el-button>
						</div>
					</div>
				</template>
			</ProTable>
		</div>
		<el-pagination
			v-model:current-page="currentPage"
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 30, 50]"
			:background="true"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			class="flex-end"
		/>
	</div>
	<div class="h100 flex-column flex-center flex-jcenter flex-auto" v-else v-loading="loading">
		<el-empty description="暂无运费模板" />
		<el-button type="primary" class="mb20" @click="$router.push({ path: `/goods/freight/add` })">新增运费模板</el-button>
	</div>
</template>

<script setup lang="tsx" name="goodsFreight">
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import ProTable from '../../../../components/ProTable/index.vue';
import { ColumnProps } from '../../../../components/ProTable/interface';
import { fetchFreightList, fetchDelFreight } from '/@/api/goods';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { fenToYuan } from '/@/utils/commonFunction';
import Detail from '../price/detail.vue';

const router = useRouter();

const loading = ref(true);
const data = ref<any[]>([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const getTableList = async () => {
	loading.value = true;
	const res = await fetchFreightList();
	if (res.code == 200) {
		data.value = res.data.records.map((v: any) => {
			return {
				...v,
				details: v.details.map((item: any) => {
					return { ...item, basicCost: fenToYuan(item.basicCost), moreCost: fenToYuan(item.moreCost) };
				}),
			};
		});
		total.value = res.data.total;
	}
	loading.value = false;
};

const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getTableList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getTableList();
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'areasLabel',
		label: '配送区域',
		minWidth: 200,
		showOverflowTooltip: {
			placement: 'top-start',
		},
		render: (scope) => {
			return scope.row.areasLabel.join('、');
		},
	},
	{
		prop: 'first',
		label: '首件(个)',
	},
	{
		prop: 'basicCost',
		label: '运费(元)',
	},
	{
		prop: 'more',
		label: '每续件(个)',
	},
	{
		prop: 'moreCost',
		label: '增加运费(元)',
	},
];

const columns2: ColumnProps<any>[] = [
	{
		prop: 'areas',
	},
	{
		prop: 'more',
		label: '每续件(个)',
	},
	{
		prop: 'moreCost',
		label: '增加运费(元)',
	},
];

const onUpdate = (row) => {
	router.push({ path: `/goods/freight/edit/${row.id}` });
	Session.set('freight-edit-row', row);
};

const onDelete = async (row: any) => {
	ElMessageBox.confirm('确认删除该运费模板?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await fetchDelFreight({ id: row.id });
		if (res.code == 200) {
			ElMessage.success('删除成功');
			getTableList();
		}
	});
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getTableList();
});
</script>

<style lang="scss">
.demo-tabs {
	.el-tabs__header {
		margin-bottom: 0;
	}
}
</style>
